<template>
  <div class="home">
		<div class="banner"></div>
		<img class="home-img" src="https://cube.elemecdn.com/8/f1/1fdd1b99d1f1ef69991d56251c2f2jpeg.jpeg?x-oss-process=image/format,webp/resize,w_150" :style="imgSize" alt="">
		<div class="content"></div>
  </div>
</template>

<script>
export default{
	name: 'about',
	data(){
		return{
			imgSize: {
				width: 100+'px',
				height: 100+'px',
				top: 50+'px',
				opacity: 1
			}
		}
  },
	methods:{
		handleScroll(){
			let top = document.documentElement.scrollTop
			var startSize = 0
			if(top >= startSize){
				let size = 100 - (top)*1.5
				size = size < 0 ? 0 : size
				if(size <=50 ){
					var opacity = size/50
				}
				let topSize = 50 + (top*0.3)/2
				topSize = topSize > 100 ? 100 : topSize
				this.imgSize = {
					width: size+'px',
					height: size+'px',
					top: topSize+'px',
					opacity
				}
			}if(top <= 10){
				let size = 100
				let topSize = 50
				this.imgSize = {
					width: size+'px',
					height: size+'px',
					top: topSize+'px'
				}
			}
		}
	},
	mounted(){
		window.addEventListener('scroll',this.handleScroll)
	}
}
</script>

<style scoped>
.home{ width: 100%; height: 3000px;}
.banner{ position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: 123px; background: #c4bdcc;}
.home-img{ position: fixed; left: 0; right: 0; margin: auto; line-height: 100px; background: #00d0d4; color: #fff;}
.content{ height: 1000px; background-color: #fff; margin-top: 123px;}
</style>